<!--  -->
<template>
  <div class="information-img-zoom" :style="{minHeight: informationHeight + 'px'}">

    <div
      class="information-img-zoom-all"
      :style="{height: imgHeight + 'px', width: imgWidth + 'px', marginBottom: marginBottomAll + 'px'}"
      v-for="item in informationData"
      :key="item.id"
      @click="clickinformation(item)">

      <div class="img-range" :style="{top: imgMarginTop + 'px'}">
        <img class="information-img-zoom-con" v-lazy="item.informationImgZoom" alt="">
      </div>

      <div class="informationCon"
        :style="{bottom: imgMarginBottom + '%', height: informationConHeight + 'px'}">

        <div v-show="item.title" class="information-title">{{item.title}}</div>
        <span v-show="item.content" class="information-span">{{item.content}}</span>

        <div v-if="btnShow" class="btn" :style="{bottom: btnBottom + 'px', left: btnLeft + '%'}">
          <span
            class="btn-span"
            :style="{top: btnSpanTop + 'px', left: btnSpanLeft + 'px'}">
            详情
          </span>
          <img style="height: 15px; width: 68px;" :src="btnMoreImgBg" alt="">
        </div>

      </div>
    </div>

  </div>
</template>

<script>
export default {
  props: {
    informationData: {
      type: Array,
      default: () => []
    },
    imgHeight: {
      type: Number,
      default: 260
    },
    imgWidth: {
      type: Number,
      default: 280
    },
    imgMarginTop: {
      type: Number,
      default: 0
    },
    imgMarginBottom: {
      type: Number,
      default: 0
    },
    informationConHeight: {
      type: Number,
      default: 124
    },
    informationHeight: {
      type: Number,
      default: 0
    },
    btnBottom: {
      type: Number,
      default: 10
    },
    btnLeft: {
      type: Number,
      default: 37
    },
    btnSpanTop: {
      type: Number,
      default: -2
    },
    btnSpanLeft: {
      type: Number,
      default: 20
    },
    btnMoreImgBg: {
      type: String,
      default: ''
    },
    btnShow: {
      type: Boolean,
      default: true
    },
    marginBottomAll: {
      type: Number,
      default: 140
    }
  },
  data () {
    return {
    }
  },
  components: {},
  computed: {},
  created () {},
  mounted () {},
  methods: {
    clickinformation (item) {
      this.$emit('clickinformation', item)
    }
  }
}

</script>

<style lang='stylus' rel='stylesheet/stylus' scoped>
.information-img-zoom {
  margin 0px 0 0px
}
.information-img-zoom-all {
  position relative
  display inline-block
  margin 0 10px 0
  // margin 0 10px 140px
  &:hover {
    .informationCon {
      .information-title {
        color #000
      }
      .information-span {
        color #000
      }
      .btn {
        .btn-span {
          color #000
        }
      }
    }
    .img-range {
      .information-img-zoom-con {
        transform scale(1.2)
      }
    }
  }

  .informationCon {
    width 100%
    cursor default
    position absolute
    left 10px
    display flex
    align-items center
    flex-direction column
    background #EEEEEE
    .information-title {
      color rgba(255,255,255,0.6)
      font-size 18px
      width 90%
      padding 10px 0
      color #666
      text-overflow: ellipsis
      overflow: hidden
      white-space: nowrap
    }
    .information-span {
      color #999
      font-size 12px
      line-height 2
      width 200px
      height 50px
      overflow:hidden
      white-space: nowrap
      text-overflow: ellipsis
      display:block
      // overflow hidden
      // text-overflow ellipsis
      // white-space: unset
      // display -webkit-box
      // -webkit-line-clamp 2
      // -webkit-box-orient vertical
    }
    .btn {
      position absolute
      .btn-span {
        position absolute
        color #999
        font-size 14px
        cursor default
      }
    }
  }

}

.img-range {
  position absolute
  left 10px
  overflow hidden
  width 100%
  height 100%
  display inline-block
  border-radius 4px
  overflow hidden
  .information-img-zoom-con {
    overflow hidden
    width 100%
    height 100%
    transition transform 1s
  }
}

/** 方法二 animate */

// img:hover {
//   animation imgScale 2s
// }
// @keyframes imgScale {
//   from {
//     width 200px
//     height 200px
//   }
//   to {
//     width 240px
//     height 240px
//   }
// }
</style>
